
	  <div class="palm-page-header multi-line">
		<div class="palm-page-header-wrapper">
	   	 <div class="icon phone"></div>
   	      <div class="title">
		 	 Phone Preferences      
          </div>
    	</div>
	  </div>
	
	
  <div id='phonepref' style='display:none'>

    <div id="phoneNumberGroup" class="palm-group">
        <div class="palm-group-title">
            Phone number
        </div>
       	<div class="palm-list">
    
       		<div class="palm-row single disabled">
				<div class="palm-row-wrapper">
					<div id="phoneNumber" class="title"></div>
				</div>
       		</div>       	

    	</div>
	</div>

    <div class="palm-group">
        <div class="palm-group-title">
            When typing in dialpad
        </div>
       	<div class="palm-list">
            <div class="palm-row single">
				<div class="palm-row-wrapper">
	            	<div id="showContactMatch" x-mojo-element="ToggleButton"></div>
	                <div class="title capitalize">
	                    Show contact matches
	                </div>
	            </div>
            </div>
        </div>
    </div>

    <div class="palm-group" id="calls">
        <div class="palm-group-title">
            Calls
        </div>
       	<div class="palm-list">

            <div id='callfwdfirstrow' class="palm-row first">
				<div class="palm-row-wrapper">
	            	<div id="callfwd" x-mojo-element="ToggleButton"></div>
	                <div class="title capitalize">
	                	Call forwarding      
	                </div>
				</div>
            </div>

       		<div id="callforward-status" class="palm-row first">
				<div class="palm-row-wrapper">
	       			<div id="callforward-spinner" x-mojo-element="Spinner" class="spinner"></div>
					<div  class="title capitalize">
	       				Reading from network
					</div>
	       		</div>
			</div>

			<div id='callfwdlastrow' class='palm-row'>                                                      	
				<div class="palm-row-wrapper textfield-group focused" x-mojo-focus-highlight="true" >
					<div class="title capitalize">
						<div id="callforward-number" x-mojo-element="TextField"></div>
					</div>
				</div>                                                                
		    </div>           

            <div id="showOutgoingCallerIDRow" class="palm-row">
				<div class="palm-row-wrapper">
	            	<div id="showOutgoingCallerID" x-mojo-element="ToggleButton"></div>
	                <div class="title capitalize">
	                	Show my caller ID         
	                </div>
				</div>
            </div>
			
			<div id='showOutgoingCallerIDRowStatus' class='palm-row'>
			</div>

            <div id='callWaitingRow' class="palm-row">
				<div class="palm-row-wrapper">
	            	<div id="callWaiting" x-mojo-element="ToggleButton"></div>
	                <div class="title capitalize">
	                    Call waiting
	                </div>
	            </div>
            </div>
			
			<div id='callWaitingRowStatus' class="palm-row">
			</div>
			
			<div id='internationalDialingRow' class="palm-row">
				<div class="palm-row-wrapper">
	            	<div id="internationalDialingToggle" x-mojo-element="ToggleButton"></div>
	                <div class="title capitalize">
	                    International dialling
	                </div>
	            </div>
            </div>
			
			<div class="palm-row last" id="internationalDialingRegionRow" >
				<div class="palm-row-wrapper">
	            	<div id="internationaldialinglabel" class="label">Dialling prefix</div>
					<div class="title" id="internationalDialingRegion">Choose region</div>
				</div>
			</div>

        </div>
    </div>
	
	<div class="palm-info-text single" id="internationalDialingInfo" style="display:none">
		When abroad, to dial USA and Canada numbers, select the country you are in.
	</div>

    <div class="palm-group" id="vmList">
        <div class="palm-group-title">
            Voicemail number
        </div>
       	<div class="palm-list">
			<div id='voicemail' class='palm-row single'>                                                      	
				<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true" >
					<div class="title">
						<div id="vm-spinner" class="vm_spinner" x-mojo-element="Spinner"></div>
						<div id="vmdatafield" x-mojo-element="TextField"></div>
					</div>
				</div>                                                                
		    </div>           
		</div>
	</div>
	
 	<div class="palm-group" id="cdma_dialing">
		<div class="palm-group-title">
			Dialling
		</div>
		<div class="palm-list">
			<div class="palm-row last">
				<div class="palm-row-wrapper">
					<div id="dtmfSelector" class='spinner' x-mojo-element="ListSelector">
                	</div>
            		<div class="left label">
	                   	 DTMF tones
	               	</div>
				</div>
			</div>
		</div>
	</div>
	<div id="cdma_dialing_text" class="explanation-text"> Short tones are half a second long. </div>
		 
	 <div id="dialingShortcutsList" x-mojo-element="List"></div>
	       
     <div class="palm-group" id="gsm_security">
        <div class="palm-group-title">
            Security
        </div>
        <div id='security' class="palm-list">
	
            <div class="palm-row first">	
				 
				<div class="palm-row-wrapper">
					
	       			<div class='spinner' id="locksim-spinner" x-mojo-element="Spinner">
                	</div>
					<div id="lockSIM" class="title capitalize">
				 		 Lock SIM card
				 	</div>
					<div id="lockSIMwaiting" class="title capitalize">
				 		 SIM card setting
				 	</div>
	       		</div>
			</div>
			
			<div class="palm-row" id="changeSIMPIN">
	            <div class="palm-row-wrapper">
			
					<div id = "changePin1" class="title capitalize">
	                	Change SIM card PIN
					</div>
	            </div>
			</div>
			
            <div class="palm-row">
				<div class="palm-row-wrapper">
	                <div id ="fdnwaiting" class = "title capitalize">
	                	Restricted dialling
	                </div>
	            	<div id="fdn" x-mojo-element="ToggleButton"></div>
					<div id = "setfdn" class="title capitalize">
	                    Restricted dialling
	                </div>                
				</div>
            </div>

			<div class="palm-row" id="changeFDNPIN">
	            <div class="palm-row-wrapper">	
					<div id = "changePin2" class="title capitalize">
	                	Change FDN PIN
					</div>
				</div>	
            </div>

            <div class="palm-row last">
				<div class="palm-row-wrapper">
	            	<div class="title capitalize" id="editFDN" >
	                	View restricted dialling list
	            	</div>
				</div>
			</div>
		</div>
    </div> 

	<div class="palm-group">
		<div class="palm-group-title">
			Network
		</div>
			<div class="palm-list">
				<div class="palm-row first" id="network_selection">
					<div class="palm-row-wrapper">
						<div id="toggleNetworkAutoSelect" x-mojo-element="ToggleButton"></div>
						<div class="title capitalize">
							Network auto‑select
						</div>
					</div>
				</div>
				<div id="reading_networklist_row" class="palm-row">
					<div class="palm-row-wrapper">
						<div id="networklist-spinner" x-mojo-element="Spinner" class="spinner"></div>
						<div id="reading_networklist_status" class="title"></div>
					</div>
				</div>
				<div id='networkdetails' x-mojo-element="Drawer">
					<div id="networklist" x-mojo-element="List"></div>
				</div>
				
				<div class='palm-row disabled' id='networknamerow'>
					<div class="palm-row-wrapper">
						<div class='title' id='networkname'></div>
					</div>
				</div>
				<div class="palm-row" id="voiceRoamingRow" x-mojo-tap-highlight="momentary">
					<div class="palm-row-wrapper">
						<div id="toggleVoiceRoaming" x-mojo-element="ListSelector"></div>                                               
					</div>
				</div>
			
				<div class="palm-row" id="ratRow" x-mojo-tap-highlight="momentary">
					<div class="palm-row-wrapper">
						<div id="toggleRat" x-mojo-element="ListSelector"></div>                                               
					</div>
				</div>
			
			<div class="palm-row" id="dataroamingrow" x-mojo-tap-highlight="momentary">
					<div class="palm-row-wrapper">
						<div id="toggleDataRoaming" x-mojo-element="ListSelector"></div>                                               
					</div>
			</div>
			<div class="palm-row last" id="wantogglerow" x-mojo-tap-highlight="momentary">
					<div class="palm-row-wrapper">
				            <div id="toggleWAN" x-mojo-element="ToggleButton"></div>
                			<div class="title">
	                    		Data Usage
	                		</div>    
					</div>
			</div>
			<div class="palm-row last" id="manualdatasettingstogglerow" style="display:none" x-mojo-tap-highlight="momentary">
					<div class="palm-row-wrapper">
				            <div id="toggleManualDataSettings" x-mojo-element="ToggleButton"></div>
                			<div class="title">
	                    		Manual Settings
	                		</div>    
					</div>
			</div>
			<div class="palm-row last" id="manualdatasettingsrow" style="display:none">
				<div class="palm-row-wrapper">
	            	<div class="title capitalize" id="manualdatasettings" >
	                	Edit Network Settings
	            	</div>
				</div>
			</div>
		</div>
	</div>


    <div class="palm-group" id="accessibility">
        <div class="palm-group-title">
            Accessibility
        </div>
        <div class="palm-list">
            <div class="palm-row single" id="ttyRow">
				<div class="palm-row-wrapper">
	            	<div id="toggleTTY" x-mojo-element="ToggleButton"></div>
                	<div class="title">
	                    TTY/TDD
	                </div>    
				</div>           
            </div>    
			<div class="palm-row last" id="hacRow">
				<div class="palm-row-wrapper">
	            	<div id="toggleHAC" x-mojo-element="ToggleButton"></div>
                	<div class="title">
	                    HAC
	                </div>    
				</div>           
            </div>         
        </div>
    </div>

    <div class="palm-group" id="provisioning">
        <div class="palm-group-title">
            Network settings
        </div>
        <div class="palm-list">
            <div class="palm-row single">
	            <div class="palm-row-wrapper">	
	               	<div id="user-spinner" x-mojo-element="Spinner" class="spinner"></div>
	               	<div id="user-label"></div>
					<div id="user-provisioning" class='title capitalize'>
	                    Update network settings
	            	</div>
				</div>            
	        </div>  
        </div>
    </div>


	<div class="palm-group" id="PRL">
		<div class="palm-group-title">
			Preferred roaming list
		</div>
		<div class="palm-list">
			<div class="palm-row single">
				<div class="palm-row-wrapper">
					<div id="PRL-spinner" x-mojo-element="Spinner" class="spinner"></div>
					<div id="PRL-label"></div>
					<div id="PRL-provisioning" class='title capitalize'>
						Update PRL
					</div>
				</div>
			</div>
		</div>
	</div> 
	<div id="voicemailclear" x-mojo-element="Button" ></div>  
</div>


<div id="phoneOffText" class="info-text" style='display:none'>
</div>

<div id="scrim" class="palm-scrim">
    <br/>    	
  	<div class="installing-spinner-container">  					
		<center><div x-mojo-element="Spinner" id="initial-query-spinner"></div></center>
	</div>	
</div>

